<template>
    <fieldset>
        <legend>tab</legend>
        <h1>tab切换案例</h1>
        <button v-for="item of arr" :key="item.name" :class="{active:msg===item}" @click="pop(item)">{{item}}</button>
        <div :is="msg"></div>
    </fieldset>
</template>
<script>
    import age from "./age.vue"
    import name from "./name.vue"
    import sex from "./sex.vue"
    import hobby from "./hoddy.vue"
    export default{
        components:{
            age,
            name,
            sex,
            hobby
        },
        data(){
            return {
                arr:["name","age","sex","hobby"],
                msg:'name'
            }
        },
        methods: {
            pop(item){
                this.msg=item
            }
        },
        // computed:{
        //     calculate(){
        //         return this.msg
        //     }
        // }
    }

</script>
<style scoped>
    .active{
        background-color: pink;
    }


</style>